<!--  -->
<template>
   <div class='model'>
       <div class="tip-wappper">
           <div class="icon">
              
               <span class="iconfont icon-self" :class="classes"></span>
           </div>
           <div class="content">
               <h3><slot name="title">提示</slot></h3>
               <p><slot name="content">内容内容内容内容</slot></p>
               <div class="btn-model">
                   <slot name="btn"><button type="button">确定</button><button type="button">确定</button></slot>              
               </div>
           </div>
       </div>
       <div class="bg">

       </div>
   </div>
</template>

<script>

    export default {
       props:{
            model: {
                type: String,
                required: true   
            },
       },
       components: {},
       data() {
           return {
               flag:false,
               type:""
           };
       },
       computed: {
          classes(){
              return {
                  // ------ 正确 ----- //
                  "icon-querengou":this.model==='success',
                  // -------- 错误 ----- //
                  "icon-cuowu": this.model==="err",
                  // ------- 提示 --- // 
                  "icon-warming": this.model === "tip",
                  "icon-wenhao": this.model === "question"

              }
          }
       },
       methods: {
           show(){
               this.flag    =   true;
           },
           hide(){
               this.flag    = false;
           }
       },
       created() {

       },
       mounted() {
           this.$nextTick(() => {
              
           })
       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
    .model{
        .bg{
         position: fixed;
         top:0;
         left:0;
         width:100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.65);
         z-index: 150;
        }
        .tip-wappper{
         position: fixed;
         top:50%;
         left:50%;
         width:300px;
         height: auto;
         font-size:12px;
         background: rgba(255,255,255, 0.85);
         transform: translate(-50%, -50%);
         display: flex;
        //  justify-content:center;
         align-items:center;
         z-index: 151;
         .icon{
             flex:0 0 75px;
             text-align: center;
             .icon-self{
                 font-size:40px;
                 color:#FF4201;
             }
         }
         .btn-model,h3,p{
             padding-top:10px;
             padding-bottom:10px;
         }
         .btn-model{
             margin-bottom:10px;
             padding-bottom:0px;
             text-align: center;
             button:nth-child(2){
                 margin-left:15px;
             }
             strong {
                 a{
                     border:1px solid #FF4201;width:80px;line-height: 30px;display:inline-block;
                 }
             }
         }
         
         .content{
             flex: 0 0 78%;
             padding-right:25px;
             h3{text-align: center;font-size:16px;border-bottom:1px solid #ccc;}
             p{font-size:13px;border-bottom:1px solid #ccc;text-align: center;}

         }
         .btn-model{
             button{border:1px solid #FF4201;width:80px;line-height: 30px;}
         }
        }

    }
</style>